import {Component, OnInit} from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import {moveItemInArray, transferArrayItem} from '@angular/cdk/drag-drop';
import {NzMessageService} from 'ng-zorro-antd/message';
import {PageDecorationService} from '../page-decoration.service';

@Component({
  selector: 'app-decoration',
  templateUrl: './decoration.component.html',
  styleUrls: ['./decoration.component.scss']
})
export class DecorationComponent implements OnInit {
  componentBaseData: any = {};
  components: any = []; // 组件总览
  componentData: any = {}; // 编辑的组件数据
  componentIndex: any;
  componentsOptions: any;
  USERTYPE = ['不限制', 'C端用户', 'B端用户'];

  constructor(
    private activatedRoute: ActivatedRoute,
    private nzMessageService: NzMessageService,
    private pageDecorationService: PageDecorationService
  ) {
  }

  ngOnInit(): void {
    const data = JSON.parse(this.activatedRoute.snapshot.queryParams.data);
    if (data) {
      this.componentBaseData = data;
      this.components = JSON.parse(data.content) || [];
    }
  }

  dropBaseComponent(event: any) {
    // console.log(event.currentIndex);
    // this.addComponent(event);
  }

  drop(event: any) {
    if (event.previousContainer === event.container) {
      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
    } else {
      this.addComponent(event);
    }
  }

  addComponent(event: any) {
    switch (event.item.data.type) {
      case 'images':
        this.components.splice(event.currentIndex, 0, {
          type: event.item.data.type,
          name: 'images' + Math.floor(Math.random() * 1000000),
          heightPercent: '',
          marginTop: '',
          marginBottom: '',
          margin: false,
          content: []
        });
        break;
      case 'loopImages':
        this.components.splice(event.currentIndex, 0, {
          type: event.item.data.type, name: 'loopImages' + Math.floor(Math.random() * 1000000),
          heightPercent: '',
          marginTop: '',
          marginBottom: '', margin: false, content: []
        });
        break;
      case 'goods':
        this.components.splice(event.currentIndex, 0, {
          type: event.item.data.type, name: 'goods' + Math.floor(Math.random() * 1000000),
          marginTop: '',
          marginBottom: '', content: []
        });
        break;
      case 'usedGoods':
        this.components.splice(event.currentIndex, 0, {
          type: event.item.data.type, name: 'usedGoods' + Math.floor(Math.random() * 1000000),
          marginTop: '',
          marginBottom: '', showNum: '', content: []
        });
        break;
      case 'bottomTab':
        if (this.components.some((item: any) => item.type === 'bottomTab')) {
          this.nzMessageService.error('底部Tab只能放置一个');
          break;
        }
        this.components.splice(event.currentIndex, 0, {
          type: event.item.data.type,
          name: 'bottomTab' + Math.floor(Math.random() * 1000000),
          marginTop: '',
          marginBottom: '',
          bgColor: '#FFFFFF',
          content: []
        });
        break;
      case 'topTab':
        this.components.splice(this.components.length, 0, {
          type: event.item.data.type,
          name: 'topTab' + Math.floor(Math.random() * 1000000),
          marginTop: '',
          marginBottom: '',
          checkedColor: '#FFFFFF',
          content: []
        });
        break;
    }
  }

  getComponentName(type: any) {
    let name = '未知';
    switch (type) {
      case 'images':
        name = '单行图片';
        break;
      case 'loopImages':
        name = '轮播图';
        break;
      case 'goods':
        name = '商品';
        break;
      case 'usedGoods':
        name = '二手商品';
        break;
      case 'topTab':
        name = '顶部Tab';
        break;
      case 'bottomTab':
        name = '底部Tab';
        break;
    }
    return name;
  }

  removeComponent(index: number) {
    this.components.splice(index, 1);
    this.componentData = {};
    this.componentIndex = '';
  }

  showEditComponent(data: any, index: number) {
    // if (this.componentData?.type) {
    //   this.nzMessageService.error('请先保存或关闭正在编辑的数据');
    //   return;
    // }
    this.componentData = data;
    this.componentsOptions = this.components.filter((item: any) => item.name && item.type !== 'bottomTab' && item.type !== 'topTab');
    this.componentIndex = index;
  }

  modifyComponent(data: any) {
    if (data.name && this.components.findIndex((item: any) => item.name === data.name) !== -1
      && this.components.findIndex((item: any) => item.name === data.name) !== this.componentIndex) {
      this.nzMessageService.error('组件名不能重复');
      return;
    }
    this.components[this.componentIndex] = data;
    this.componentData = {};
    this.componentIndex = '';
  }

  closeComponent() {
    this.componentData = {};
    this.componentIndex = '';
  }

  saveDecoration() {
    if (!this.components?.length) {
      this.nzMessageService.error('请选择组件并配置');
      return;
    }
    if (!this.components?.every((item: any) => item.content.length)) {
      this.nzMessageService.error('存在未配置的组件');
      return;
    }
    for (let i = 0; i < this.components.length; i++) {
      if (this.components[i].type === 'loopImages' || this.components[i].type === 'images') {
        if (!this.components[i].content.every((item: any) => item.image)) {
          this.nzMessageService.error(`组件${this.components[i].name}图片不能为空`);
          return;
        }
      }
      if (this.components[i].type === 'topTab') {
        if (!this.components[i].checkedColor) {
          this.nzMessageService.error(`组件${this.components[i].name}请选择选中颜色`);
          return;
        }
        if (!this.components[i].content.every((item: any) => item.text && item.anchor)) {
          this.nzMessageService.error(`组件${this.components[i].name}存在未完善的数据`);
          return;
        }
      }
      if (this.components[i].type === 'bottomTab') {
        if (!this.components[i].bgColor) {
          this.nzMessageService.error(`组件${this.components[i].name}请选择背景色`);
          return;
        }
        if (!this.components[i].content.every((item: any) => item.image)) {
          this.nzMessageService.error(`组件${this.components[i].name}图片不能为空`);
          return;
        }
      }
    }
    this.pageDecorationService.saveDecoration({
      ...this.componentBaseData,
      content: JSON.stringify(this.components)
    }).then((res: any) => {
      if (res.code === 0) {
        this.nzMessageService.success('操作成功');
        window.history.back();
      }
    });
  }
}
